<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
         body {
             margin: 0;
         }
         ul {
             padding: 0;
             margin: 0;
             list-style: none;
         }
        .wrapper {
            font-size: 20px;
            width: 550px;
            margin: 0 auto;
        }
        .list {
            width: 100%;
            padding: 0 15px;
            box-sizing: border-box;
        }
        .list ul li {
            width: 100%;
            min-height: 80px;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        .pro-box {
            padding: 10px 0;
        }
        .pro-box button {
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 26px;
            cursor: pointer;
            border: 1px solid #ccc;
            padding: 0;
            vertical-align: middle;
        }
        .pro-box button:hover {
            background-color: #ccc;
        }

        .footer {
            width: 100%;
            height: 80px;
            position: fixed;
            bottom: 0;
            left: 0;
            text-align: right;
           
        }
        .footer .w {
            background-color: #f0f0f0;
            width: 550px;
            padding: 0 15px;
            box-sizing: border-box;
            margin: 0 auto;
        }
        .footer .w button {
            padding: 10px 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            font-size: 20px;
        }
        .footer .w button:active {
            background-color:red;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <!-- 列表区域 -->
        <div class="list">
            <ul class="list-wrap">
                <!-- 每个li标签代表一个商品 -->
                <li>
                    <div class="pro-name">商品名称A</div>
                    <div class="pro-box">
                        <button data-role="sub"> - </button>
                        <span data-count="1">1</span>
                        <button data-role="add">+</button>
                    </div>
                </li>

                <li>
                    <div class="pro-name">商品名称B</div>
                    <div class="pro-box">
                        <button data-role="sub"> - </button>
                        <span data-count="3">3</span>
                        <button data-role="add">+</button>
                    </div>
                </li>

                <li>
                    <div class="pro-name">商品名称C</div>
                    <div class="pro-box">
                        <button data-role="sub"> - </button>
                        <span data-count="7">7</span>
                        <button data-role="add">+</button>
                    </div>
                </li>

            </ul>
        </div>
        <!-- 按钮标签 -->
        <div class="footer">
            <div class="w">
                <button class="btn-add">加入购物车</button>
            </div>
        </div>
    </div>

    <script>
        // 要求:
            // 1. 获取相关的标签
            var listWrap = document.querySelector(".list-wrap");
            var btnAdd = document.querySelector(".btn-add");

            // 2. 添加行为(事件委托)
            listWrap.onclick = function(event){
                // 获取事件源
                var el = event.target;
                // 获取自定义属性值
                var _role = el.dataset.role;
                // console.log(_role);
                // 进入判断语句
                if(_role == "sub"){ // 减法
                    // 当前点击的标签的下一个元素
                    console.dir(el);
                    // console.log(el.nextElementSibling);
                    var span = el.nextElementSibling;
                    // 获取当前商品的数量
                    var _count = span.dataset.count;
                    // 设置计数器变量自减
                    _count -= 1;
                    // 设置数量文本
                    span.innerText = _count;
                    // 设置自定义属性值
                    span.setAttribute("data-count",_count);
                    // 判断是否小于等于
                    if( _count <= 0 ){
                        // 删除li标签
                        var li = el.parentElement.parentElement;
                        // console.log(li);
                        li.remove();
                    }
                }
                if(_role == "add"){ // 加法
                    // 当前点击的标签的上一个元素
                    // console.dir(el);
                    var span = el.previousElementSibling;
                    // 获取当前商品的数量
                    var _count = span.dataset.count - 0;
                    // 设置当前商品数量自增
                    _count +=1 ;
                     // 设置数量文本
                     span.innerText = _count;
                     // 设置自定义属性值
                     span.setAttribute("data-count",_count);
                }

            }

            // 3. 编写函数 添加商品
            function addProduct(){
                // 字符串
                var str = '';
                // 创建li标签
                var liCreate = document.createElement("li");
                    // 拼接
                    str +='<div class="pro-name">商品名称X</div>'
                    str +='<div class="pro-box">'
                    str +='    <button data-role="sub"> - </button>'
                    str +='    <span data-count="1">1</span>'
                    str +='    <button data-role="add">+</button>'
                    str +='</div>'
                // 渲染字符串
                liCreate.innerHTML = str;
                // 往ul标签添加li标签
                listWrap.appendChild(liCreate);
            }

            // 4. 点击 "加入购物车"按钮
            // 防抖思想
            var d = null;

            btnAdd.onclick = function() {
                // 判断延迟函数是否正在执行 ,是,就清除,不执行延迟函数
                if(d) clearTimeout(d);
                // 调皮的动作(频繁点击按钮)停下来,再执行延迟函数
                d = setTimeout(function(){
                    // 再添加商品
                    addProduct();
                    // 释放d变量
                    d = null;
                },300)
            }


    </script>
</body>
</html>